<template>
  <m-popup :visible.sync="visible" height="85vh" @close="handleClose" @open="handleOpen">
    <view slot="header" class="header">
      <text>{{ title }}</text>
      <text class="subTitle">{{ desc }}</text>
    </view>

    <m-tabs background="#fff" active-color="#00a9f2" @click="handleTabChange" v-model="ims" animated>
      <m-tabpane :title="item.label" v-for="(item, index) in imsList.arr" :key="index" padding="20rpx 10rpx">
        <m-radio-group inline v-model="target" v-if="list.length">
          <view class="radio-box">
            <m-radio-button :label="it.wharfCode + '%' + it.wharfId" v-for="(it, index) in list" :key="index">
              {{ it.wharfCode }}
              <view class="status" :class="{ waring: it.status !== 1 }">
                {{ dicts['wharf_status'].map[it.status] }}
              </view>
            </m-radio-button>
          </view>
        </m-radio-group>
        <m-empty v-else />
      </m-tabpane>
    </m-tabs>

    <view slot="footer" class="footer">
      <m-button size="xl" type="default" plain width="26%" @click="handleClose">取消 </m-button>
      <m-button size="xl" width="70%" @click="handleConfirm"> 保存 </m-button>
    </view>
  </m-popup>
</template>

<script>
import { wharfList } from '@/api/modules/in-work'
import { mapState } from 'vuex'

export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '出库码头—人工指定',
    },
    desc: {
      type: String,
      default: '快来手动选择一个可以出库的码头吧！',
    },
  },
  data() {
    return {
      visible: false,
      list: [],
      target: '',
      imsId: '',
      imsText: '',
      ims: 0,
    }
  },
  watch: {
    value(val) {
      this.visible = val
    },
  },
  computed: {
    ...mapState({
      dicts: (state) => state.outWork.dicts,
      imsList: (state) => state.cache.imsList,
    }),
  },
  methods: {
    async handleTabChange(e) {
      const { value: imsId, label } = this.imsList.arr[e.paneKey]
      const { rows } = await wharfList({
        imsId,
        pageNum: 1,
        pageSize: 10000,
      })
      this.list = rows
      this.imsId = imsId
      this.imsText = label
    },
    async handleOpen() {
      this.ims = 0
      this.handleTabChange({ paneKey: 0 })
    },
    handleClose() {
      this.visible = false
      this.$emit('input', false)
      this.$emit('close')
    },
    handleConfirm() {
      const [txt, wharfId] = this.target.split('%')
      this.$emit('confirm', {
        wharfId,
        codeTxt: txt,
        imsId: this.imsId,
        imsText: this.imsText,
      })
      this.handleClose()
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: column;
  margin-bottom: -40rpx;
  text {
    text-align: left;
    margin-left: 30rpx;
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  .subTitle {
    font-size: 30rpx;
    color: #4b5661;
  }
}
.footer {
  display: flex;
  justify-content: space-between;
}
.radio-box {
  display: grid;
  grid-template-columns: repeat(3, 215rpx);
  grid-gap: 20rpx;
  .radio {
    font-size: 30rpx;
    font-weight: bold;
    border-color: #d7dce0;
    color: #748da7;
    margin: 0;
    &--checked {
      border-color: #248dfa;
      color: #248dfa;
    }
  }
  .status {
    font-size: 24rpx;
    color: #21d58f;
    margin-top: 10rpx;
    &.waring {
      color: rgb(255, 139, 34);
    }
  }
}
</style>
